<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数组的改变</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <button @click="changePeiqi">修改佩奇</button>
            <h2 v-for="p in persons" :key="p.id">
                {{p.name}} --- {{p.gender}}
            </h2>
        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            let vm = new Vue({
                el:'#demo',
                data:{
                    persons:[
                        {id:'iuyewq65',name:'小猪佩奇',gender:'女'},
                        {id:'iuyewq66',name:'小猪乔治',gender:'男'},
                        {id:'iuyewq67',name:'小羊苏西',gender:'女'},
                    ]
                },
                methods: {
                    changePeiqi(){
                        // this.persons[0].name = 'peiqi'
                        // this.persons[0].gender = '男'
                        // this.persons[0] = {id:'yusatdyua99',name:'马老师',gender:'男'}
                        this.persons.splice(0,1,{id:'yusatdyua99',name:'马老师',gender:'男'})
                    }
                },
            })
        </script>
    </body>
</html>